<script setup>
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['update:modelValue'])

const handleSwitch = () => {
  emit('update:modelValue', !props.modelValue)
}
</script>

<template>
  <div
    class="w-[34px] h-[20px] rounded-full flex items-center cursor-pointer"
    :class="{ 'bg-[#2e5592]': modelValue, 'bg-[#8b8b8d]': !modelValue }"
    @click="handleSwitch">
    <div
      class="w-4 h-4 rounded-full bg-[--fill-0] transition-all duration-300"
      :class="{ 'translate-x-[16px]': modelValue, 'translate-x-[2px]': !modelValue }"></div>
  </div>
</template>
